<template>
  <div>
    <el-card class="box-card">
      <div>
        <el-table
          :data="tableData"
          style="width: 100%">
          <el-table-column
            label="编号"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.rid }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="角色名称"
            width="180">
            <template slot-scope="scope">
              <el-popover trigger="hover" placement="top">
                <p>姓名: {{ scope.row.rolename }}</p>
                <div slot="reference" class="name-wrapper">
                  <el-tag size="medium">{{ scope.row.rolename }}</el-tag>
                </div>
              </el-popover>
            </template>
          </el-table-column>
          <el-table-column
            label="角色介绍"
            width="180">
            <template slot-scope="scope">
              <span style="margin-left: 10px">{{ scope.row.remark }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="角色状态"
            width="180">
            <template slot-scope="scope">
              <span v-if="scope.row.status==0" style="color:green;">正常</span>
              <span v-if="scope.row.status==1" style="color:red;">禁用</span>
              <span v-if="scope.row.status==2" style="color:firebrick;">异常</span>
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.rid)">编辑</el-button>
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.row.rid)">删除</el-button>
            </template>
          </el-table-column>
          <el-table-column
            align="left">
            <template slot="header">
              <el-button type="info" round @click="addVisible = true">新增角色</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div>
        <el-dialog title="增加角色页面" :visible.sync="addVisible" destroy-on-close>
          <el-form :model="add">
            <el-form-item label="角色编号" :label-width="formLabelWidth">
              <el-input v-model="add.rid" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色名称" :label-width="formLabelWidth">
              <el-input v-model="add.rolename" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色介绍" :label-width="formLabelWidth">
              <el-input v-model="add.remark" clearable></el-input>
            </el-form-item>
            <el-form-item label="角色状态" :label-width="formLabelWidth">
              <el-radio-group v-model="add.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">禁用</el-radio>
                <el-radio :label="2">异常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="addVisible = false">取 消</el-button>
            <el-button type="primary" @click="adds">确 定</el-button>
          </div>
        </el-dialog>
      </div>
      <div>
        <el-dialog title="修改角色页面" :visible.sync="dialogVisible">
          <el-form :model="input">
            <el-form-item label="角色编号" :label-width="formLabelWidth">
              <el-input v-model="input.rid" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色名称" :label-width="formLabelWidth">
              <el-input v-model="input.rolename" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色介绍" :label-width="formLabelWidth">
              <el-input v-model="input.remark" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="角色状态" :label-width="formLabelWidth">
              <el-radio-group v-model="input.status">
                <el-radio :label="0">正常</el-radio>
                <el-radio :label="1">禁用</el-radio>
                <el-radio :label="2">异常</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
          <div slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="update">确 定</el-button>
          </div>
        </el-dialog>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'role',
  data () {
    return {
      formLabelWidth: '120px',
      tableData: [],
      dialogVisible: false,
      addVisible: false,
      input: {},
      add: {
        rid: '',
        rolename: '',
        remark: '',
        status: ''
      }
    }
  },
  mounted () {
    this.listrole()
  },
  methods: {
    async adds () {
      const { data: res } = await this.$axios.post('/addrole', {
        rid: this.add.rid,
        rolename: this.add.rolename,
        remark: this.add.remark,
        status: this.add.status
      })
      if (res === true) {
        this.addVisible = false
        this.listrole()
      }
    },
    async update () {
      const { data: res } = await this.$axios.post('/updaterole', this.input)
      console.log(res)
      if (res === true) {
        this.dialogVisible = false
        this.listrole()
      } else {
        this.$message({
          message: '抱歉,亲编辑时遇到了一些问题',
          type: 'warning'
        })
      }
    },
    async listrole () {
      const { data: res } = await this.$axios.post('/listrole')
      this.tableData = res.roles
    },
    async handleEdit (row) {
      this.dialogVisible = true
      const { data: res } = await this.$axios.post('/upidrole', {
        rid: row
      })
      this.input = res
    },
    async handleDelete (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$axios.post('/delrole', {
          rid: row
        })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.listrole()
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
        this.listrole()
      })
    }
  }
}
</script>

<style scoped>
.backss{
  background-color: #333333;
}
</style>
